<template>
  <div class="w-full flex flex-col mb-8 items-center justify-center text-center">
    <p class="text-8xl font-bold tracking-wider text-gray-300">{{ code }}</p>
    <p class="text-5xl font-bold tracking-wider text-gray-300 mt-2">
      {{ instructions }}
    </p>
    <p class="text-2xl text-gray-500 my-12">{{ desc }}</p>
    <button class="btn btn-active btn-ghost" @click="router.push({ name: toName })">Back To {{ to }}</button>
  </div>
  <div class="w-full max-w-[30rem] mx-auto p-4 h-min 2xl:self-end">
    <img :src="error_icon" alt="" srcset="" />
  </div>
</template>

<script lang="ts" setup>
import error_icon from 'svgs/error.svg'

const router = useRouter()
defineProps<{ code: string; instructions: string; desc: string; to: string; toName: string }>()
</script>
